<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../Css/easyui.css">
    <link rel="stylesheet" type="text/css" href="../Css/icon.css">
    <link rel="stylesheet" type="text/css" href="../Css/demo.css">
    <script type="text/javascript" src="../JavaScript/jquery.min.js"></script>
    <script type="text/javascript" src="../JavaScript/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../JavaScript/jquery.serializeObject.js"></script>
    <script type="text/javascript" src="../xheditor/xheditor-1.2.2.min.js"></script>
    <script type="text/javascript" src="../xheditor/xheditor_lang/zh-cn.js"></script>

</head>
<body>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',split:true" title="West" style="width:200px;">
        <ul id="tt"></ul>
    </div>
    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
        <div id="dd" class="easyui-tabs" style="width:500px;height:250px;" data-options="fit:true">
            <div title="新闻标题" style="display:none;" data-options="fit:true,iconCls:'icon-redo'">
                <table id="dg"></table>
            </div>
            <div title="评论新闻" data-options="iconCls:'icon-undo'" style="overflow:auto;padding:20px;display:none;">
                    <div class="easyui-layout" data-options="fit:true">
                        <div data-options="region:'west',fit:true" style="width:820px;padding:10px;overflow-y:scroll;overflow-x:scroll">
                            <!--标题-->
                            <p id="title" style="width:600px;height:80px;font-size:30px;color:black"></p>
                            <!--内容-->
                            <div id="contents" style="width:600px;height:120px;font-size:16px;color:black"></div>
                            <form method="post" style="margin-top:20px" id="zz">
                                <table>
                                    <tr>
                                        <td style="width:60px">用户名ID:</td>
                                        <td><input type="text" name="commentId" id="commentId"></td>
                                    </tr>
                                    <tr>
                                        <td style="width:60px">评论标题:</td>
                                        <td><input type="text" name="title"></td>
                                    </tr>
                                    <tr>
                                        <td style="width:60px;">评论内容:</td>
                                        <td><textarea name="content" id="textarea" class="xheditor" cols="90" rows="10"></textarea></td>
                                    </tr>
                                    <tr>
                                        <td style="width:60px;">评论时间:</td>
                                        <td><input type="text" name="time" id="time"></td>
                                    </tr>

                                </table>
                                <div style="text-align:center;padding:5px">
                                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="SubmitForm()" style="margin-right:20px">发表评论</a>
                                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="ClearForm()" style="margin-left:20px">Clear</a>
                                </div>
                            </form>
                            <table id="cdg"></table>
                        </div>
                    </div>
        </div>
    </div>
    </div>

    <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:350px;padding:10px">
        <!--表单验证-->
        <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
            <table cellpadding="5">
                <tr>
                    <td>Title:</td>
                    <td><input class="easyui-textbox" type="text" name="title" data-options="required:true"></td>
                </tr>
                <tr>
                    <td>Content:</td>
                    <td>
                        <textarea rows="5" cols="22" name="content"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>CateId:</td>
                    <td><input  type="text" name="cateId" id="cateId"></td>
                </tr>
                <tr>
                    <td>edit:</td>
                    <td><input type="text" name="_id"></td>
                </tr>
                <tr>
                    <td>date:</td>
                    <td><input type="text" name="date" id="date"></td>
                </tr>
            </table>
        </form>
        <!--按钮-->
        <div style="text-align:center;padding:5px">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="margin-right:20px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="margin-left:20px">Clear</a>
        </div>
    </div>
    <!--新闻搜索框-->
    <div id="w" class="easyui-window" title="Basic Window" data-options="iconCls:'icon-save',closed:true" style="width:500px;height:200px;padding:10px;">
        <form id="ss" method="post" >
            <table style="margin:auto">
                <tr>
                    <td>Title:</td>
                    <td><input id="name" class="easyui-textbox" type="text" name="name"></td>
                </tr>
            </table>
        </form>
        <div style="text-align:center;padding:5px">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="doSearch()">Search</a>
        </div>
    </div>

    <!--评论搜索框-->
    <div id="ww" class="easyui-window" title="Basic Window" data-options="iconCls:'icon-save',closed:true" style="width:500px;height:200px;padding:10px;">
        <form id="qq" method="post" >
            <table style="margin:auto">
                <tr>
                    <td>Title:</td>
                    <td><input id="names" class="easyui-textbox" type="text" name="name"></td>
                </tr>
            </table>
        </form>
        <div style="text-align:center;padding:5px">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="doSearchs()">Search</a>
        </div>
    </div>
</div>
<script type="text/javascript">
    //分类模块 树
    $('#tt').tree({
        method:'get',
        url:'http://localhost:3000/cate/list/1',
        onClick(node){
            $("#cateId").val(node._id);
            $('#dd').tabs('select',0);
            $('#dg').datagrid('load',{
                cateId: node._id,
            });

            $("#parentId").val(node._id);
        }
    });

   //新闻模块
    function submitForm(){
        $('#ff').form('submit',{
            onSubmit:function(){
                if($(this).form('enableValidation').form('validate')){
                    //ajax 新增提交
                    var data = $("#ff").serializeObject();
                    if(data._id && data._id.trim().length>0){
                        //editMode
                        $.ajax({
                            method:'put',
                            data:data,
                            url:'http://localhost:3000/news/data/' +data._id,
                        }).done(function(res){
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                        })
                    }else{
                        //addMode
                        delete data._id;
                        $.ajax({
                            method:'post',
                            data:data,
                            url:'http://localhost:3000/news/data'
                        }).done(function(res){
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                        })
                    }
                }else{
                    //错误提示
                    $.messager.show({
                        title:'信息提示',
                        msg:'表单验证有误，请重新输入',
                        timeout:5000,
                        showType:'slide'
                    });
                }
            }
        });
    }
    function clearForm(){
        $('#ff').form('clear');
    }
    var toolbar = [{
        text:'Add',
        iconCls:'icon-add',
        handler:function(){
            $('#dlg').dialog('open');

            var d = new Date();
            var m1="/";
            var m2=":";
            var time=d.getFullYear()+m1+parseInt(d.getMonth()+1)+m1+d.getDate()+" "+d.getHours()+m2+d.getMinutes();
            $("#date").val(time);
        }
    },{
        text:'删除',
        iconCls:'icon-remove',
        handler:function(){
            var msg = "您真的确定要删除吗？\n\n请确认！";
            if (confirm(msg)==true){
                var gss = $("#dg").datagrid('getSelections');
                var ids = [];
                for(var i=0;i<gss.length;i++){
                    ids.push(gss[i]._id);
                }
                $.ajax({
                    url:'http://localhost:3000/news/deletes',
                    method:'post',
                    data:{ids:ids.toString()}
                }).done(function(res){
                    if(res.status === 200){
                        $.messager.show({
                            title:'信息提示',
                            msg:'删除数据成功',
                            timeout:5000,
                            showType:'slide'
                        });
                    }else{
                        $.messager.show({
                            title:'信息提示',
                            msg:'请选中要删除的数据',
                            timeout:5000,
                            showType:'slide'
                        });
                    }
                    $("#dg").datagrid("reload");
                })
            }
        }
    },{
        text:'Search',
        iconCls:'icon-search',
        handler:function(){
            $('#w').window('open');
        }
    },
        {
            text:'Back',
            iconCls:'icon-back',
            handler:function(){
                $('#dg').datagrid('load', {
                    name: "" ,
                });
            }
        }
    ];
    function doSearch(){
        var search = $("#name").val();
        console.log(search);
        $('#dg').datagrid('load', {
            title: search ,
        });
        $('#w').window('close');
    }
    $('#dg').datagrid({
        toolbar:toolbar,
        pagination:true,
        method:'post',
        fit:true,
        url:'http://localhost:3000/news/list',
        columns:[[
            {field:'ck',checkbox:true},
            {field:'_id',title:'ID',width:190},
            {field:'title',title:'标题',width:300},
            {field:'commentCount',title:'评论数',width:40},
            {field:'date',title:'时间',width:120},
            {field:'opt',title:'操作',width:120,
                formatter: function (value,row,index){
                    return "<a href='javascript:void(0)' class='edit'  onclick='editData()' style='color:red;text-decoration:none'>编辑</a> <a href='javascript:void(0)' class='del' onclick='Delete()' style='color:red;text-decoration:none'>删除</a> <a href='javascript:void(0)'  onclick='Comment("+JSON.stringify(row)+")' class='com' style='color:red;text-decoration:none'>评论</a>"
                }
            }
        ]],
        onDblClickRow(index,row){
            editData(row);
        },

        onLoadSuccess:function(data){
            $('.edit').linkbutton({text:'编辑',plain:true,});
            $('.del').linkbutton({text:'删除',plain:true,});
            $('.com').linkbutton({text:'评论',plain:true,});
        },
    });
    function editData(row){
        $('#ff').form('load',row);
        $('#dlg').dialog('open');
    }
    function Delete(){
        var msg = "您真的确定要删除吗？\n\n请确认！";
        if (confirm(msg)==true){
            var gss = $("#dg").datagrid('getSelections');
            var ids = [];
            for(var i=0;i<gss.length;i++){
                ids.push(gss[i]._id);
            }
            $.ajax({
                url:'http://localhost:3000/news/deletes',
                method:'post',
                data:{ids:ids.toString()}
            }).done(function(res){
                if(res.status === 200){
                    $.messager.show({
                        title:'信息提示',
                        msg:'删除数据成功',
                        timeout:5000,
                        showType:'slide'
                    });
                }else{
                    $.messager.show({
                        title:'信息提示',
                        msg:'请选中要删除的数据',
                        timeout:5000,
                        showType:'slide'
                    });
                }
                $("#dg").datagrid("reload");
            })
        }
    }
    function Comment(row){
        $('#dd').tabs('select',1);
        $('#title').text(row.title);
        $('#contents').text(row.content);
        $('#commentId').val(row._id);
        $('#cdg').datagrid('load', {
            commentId: row._id,
        });

        var d = new Date();
        var m1="/";
        var m2=":";
        var time=d.getFullYear()+m1+parseInt(d.getMonth()+1)+m1+d.getDate()+" "+d.getHours()+m2+d.getMinutes();
        $("#time").val(time);
    }


    //评论模块
    var toolbars = [{
        text:'删除',
        iconCls:'icon-remove',
        handler:function(){
            var msg = "您真的确定要删除吗？\n\n请确认！";
            if (confirm(msg)==true){
                var gss = $("#cdg").datagrid('getSelections');
                var ids = [];
                for(var i=0;i<gss.length;i++){
                    ids.push(gss[i]._id);
                }
                $.ajax({
                    url:'http://localhost:3000/comment/deletes',
                    method:'post',
                    data:{ids:ids.toString()}
                }).done(function(res){
                    if(res.status === 200){
                        $.messager.show({
                            title:'信息提示',
                            msg:'删除数据成功',
                            timeout:5000,
                            showType:'slide'
                        });
                    }else{
                        $.messager.show({
                            title:'信息提示',
                            msg:'请选中要删除的数据',
                            timeout:5000,
                            showType:'slide'
                        });
                    }
                    $("#cdg").datagrid("reload");
                })
            }
        }
    },{
        text:'Search',
        iconCls:'icon-search',
        handler:function(){
            $('#ww').window('open');
        }
    },
        {
            text:'Back',
            iconCls:'icon-back',
            handler:function(){
                $('#cdg').datagrid('load', {
                    title: "" ,
                });
            }
        }
    ];
    $('#cdg').datagrid({
        toolbar:toolbars,
        pagination:true,
        method:'post',
        fit:true,
        url:'http://localhost:3000/comment/list',
        columns:[[
            {field:'ck',checkbox:true},
            {field:'_id',title:'ID',width:180},
            {field:'title',title:'评论标题',width:100},
            {field:'content',title:'评论内容',width:207},
            {field:'time',title:'评论时间',width:110},
            {field:'opt',title:'操作',width:120,
                formatter: function (value,row,index){
                    return "<a href='javascript:void(0)' class='button' onclick='Delete()' style='color:red;text-decoration:none'>删除</a>"
                }
            }
        ]],
        onLoadSuccess:function(data){
            $('.button').linkbutton({text:'删除',plain:true,});
        }
    });
    function SubmitForm(){
        $('#zz').form('submit',{
            onSubmit:function(){

                if($(this).form('enableValidation').form('validate')){
                    //ajax 新增提交
                    var data = $("#zz").serializeObject();
                    if(data._id && data._id.trim().length>0){
                        //editMode
                        $.ajax({
                            method:'put',
                            data:data,
                            url:'http://localhost:3000/comment/data/' +data._id,
                        }).done(function(res){
                            $('#dlg').dialog('close');
                            $('#cdg').datagrid('reload');
                            $('#dg').datagrid('reload');
                        })
                    }else{
                        //addMode
                        delete data._id;
                        $.ajax({
                            method:'post',
                            data:data,
                            url:'http://localhost:3000/comment/data'
                        }).done(function(res){
                            $('#dlg').dialog('close');
                            $('#cdg').datagrid('reload');
                            $('#dg').datagrid('reload');
                        })
                    }
                }else{
                    //错误提示
                    $.messager.show({
                        title:'信息提示',
                        msg:'表单验证有误，请重新输入',
                        timeout:5000,
                        showType:'slide'
                    });
                }
            }
        });
    }
    function ClearForm(){
        $('#zz').form('clear');
        $('textarea').val('');
    }
    function Delete(){
        var msg = "您真的确定要删除吗？\n\n请确认！";
        if (confirm(msg)==true){
            var gss = $("#cdg").datagrid('getSelections');
            var ids = [];
            for(var i=0;i<gss.length;i++){
                ids.push(gss[i]._id);
            }
            $.ajax({
                url:'http://localhost:3000/comment/deletes',
                method:'post',
                data:{ids:ids.toString()}
            }).done(function(res){
                if(res.status === 200){
                    $.messager.show({
                        title:'信息提示',
                        msg:'删除数据成功',
                        timeout:5000,
                        showType:'slide'
                    });
                }else{
                    $.messager.show({
                        title:'信息提示',
                        msg:'请选中要删除的数据',
                        timeout:5000,
                        showType:'slide'
                    });
                }
                $("#cdg").datagrid("reload");
            })
        }
    }
    function doSearchs(){
        var search = $("#names").val();
        console.log(search);
        $('#cdg').datagrid('load', {
            title: search ,
        });
        $('#ww').window('close');
    }

</script>
</body>
</html>